<template>
  <div class="s">
   
    <div class="c-l">
      <div class="c-lyr" ref="scroll">
        <ul ref="ul">
          <li
            v-for="(item, index) in lyricData"
            :key="index"
            :class="{ lyrLightHight: index == highlightLine }"
          >
            {{ item.lyr }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Lyric",
  data() {
    return {
      lyricLiHeights: [],
      highlightLine: 0,

      // 缓存的歌词下标
      CacheIndex: 0,
    };
  },
  methods: {
    //正则处理歌词
    // regRex(str) {
    //   // var reg= /(ru)n(oob)/i
    //   //获取歌词贡献者
    //   let regUser = /\[(.*)\]\n/gim;

    //   let user = regUser.exec(str);
    //   str = str.substring(user[0].length, str.length);

    //   //匹配歌词
    //   let reg = /\[(.*)\](.*)\n/gim;
    //   let res;
    //   while ((res = reg.exec(str))) {
    //     this.lyrs.push({ time: this._timeForm(res[1]), lyr: res[2] });
    //   }
    //   // console.log(
    //   //   "this.lyrs正则处理歌词)",
    //   //   JSON.parse(JSON.stringify(this.lyrs))
    //   // );
    // },
    // //将字符串xx:xx的时间格式处理成秒
    // _timeForm(time) {
    //   let index = time.indexOf(":");
    //   let min = time.substring(0, index);
    //   let seconds = time.substring(index + 1, time.length);
    //   return min * 60 + seconds * 1;
    // },
    // 初始化li的高度
    _initNextTick() {
      this.$nextTick(() => {
        this._initTops(this.$refs.ul.children);
      });
    },
    //获取每一个歌词li的高度
    _initTops(arr) {
      let lyricLiHeight = [];
      Array.from(arr).forEach((item, index) => {
        lyricLiHeight.push(item.offsetTop);
      });
      this.lyricLiHeights = lyricLiHeight;
    },
    //监听任意方式得到的当前播放时间,来进行对象滚动,当index在歌词前五行和后无行时,进行居中
    //歌词和空白都是固定高度,所以可以通过歌词的行数来确定居中
    //居中方式:当前行到顶部的距离(-90是因为父元素到滑动区域的距离有90)-在多少行就可以居中 ,删除滑动区域距离父元素的距离
    _scrollTo(LiIndex) {
      // console.log("_scrollTo", LiIndex, this.lyricData.length);
      if (LiIndex < 5) {
        this.$refs.scroll.scrollTop = 0;
      } else if (LiIndex >= this.lyricData.length - 5) {
        this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight;
      } else {
        // console.log(
        //   "this.lyricLiHeights[LiIndex]",
        //   this.lyricLiHeights[LiIndex]
        // );
        // console.log(
        //   "this.lyricLiHeights[LiIndex+1]",
        //   this.lyricLiHeights[LiIndex + 1]
        // );
        // console.log(
        //   "this.lyricLiHeights[LiIndex]",
        //   this.lyricLiHeights[LiIndex]
        // );
        this.$refs.scroll.scrollTop =
          this.lyricLiHeights[LiIndex] -
          (this.lyricLiHeights[LiIndex + 1] - this.lyricLiHeights[LiIndex]) * 4;
        // console.log("this.$refs.scroll.scrollTop",this.$refs.scroll.scrollTop,"---",this.lyricLiHeights[LiIndex]-(this.lyricLiHeights[LiIndex+1]-this.lyricLiHeights[LiIndex])*4);
      }
    },
  },

  computed: {
    // song();
    lyricData() {
      // console.log("this.$store.state.musicState.lyricData",JSON.parse(JSON.stringify(this.$store.state.musicState.lyricData)));
      let data = this.$store.state.musicState.lyricData;

      return data;
    },
    // 获取播放当前时间
    currentTime() {
      return this.$store.state.musicState.currentTime;
    },
  },
  mounted() {
    // 初始化li的高度
    this._initNextTick();
  },
  watch: {
    lyricData() {
      this._initNextTick();
    },
    //监听当前播放时间,和转换后的歌词时间进行对比,获得当前时间对应的歌词行数
    //第一行时间之前,直接制顶,否则会因为findIndex找不到从而获取到最后一行的索引
    currentTime(time) {
      if (time < this.lyricData[0].time) {
        this.$refs.scroll.scrollTop = 0;
        return;
      }
      let textCache = "";
      let LiIndex = this.lyricData.findIndex((item, index) => {
        if (index < this.lyricData.length - 1) {
          //  判断下一个是否歌词为空的作用
          textCache = item.lyr;
          return item.time <= time && this.lyricData[index + 1].time >= time;
        } else {
          return true;
        }
      });
      // console.log("第二个", LiIndex);
      this._scrollTo(LiIndex);
      this.CacheIndex = textCache == "" ? LiIndex - 1 : LiIndex;
      this.highlightLine = this.CacheIndex;
    },
  },
};
</script>

<style scoped lang="scss">
.s {
  position: absolute;
  top: -500px;
  left: calc(-50% - 500px);
  height: 400px;
  width: 800px;
  overflow: hidden;
  overflow: scroll;
  text-align: center;
  box-sizing: border-box;
  background-color: rgba(0,0,0,.2);
  z-index: 1200;
  // 滚动不产生滚动条兼容
  &::-webkit-scrollbar {
    width: 0px;
  }
  &::-o-scrollbar {
    width: 0px;
  }
  &::-moz-scrollbar {
    width: 0px;
  }
  > .scale {
    position: absolute;
    right: 40px;
    top: 40px;
    width: 30px;
    height: 20px;
    border: solid 1px #ccc;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
  }
  .b-i {
    position: absolute;
    left: 25%;
    > img {
      width: 400px;
      height: 400px;
      filter: blur(20px) opacity(0.5);
    }
  }
  .c-c {
    height: 300px;
    width: 300px;
    border-radius: 300px;
    background: #2b2c2f;
    text-align: center;
    line-height: 300px;
    position: absolute;
    left: 0;
    margin: 80px 80px;
    animation: rot 20s linear infinite;
    > img {
      height: 200px;
      width: 200px;
      border-radius: 200px;
    }
  }
  .on {
    animation-play-state: running;
  }
  .done {
    animation-play-state: paused;
  }

  @keyframes rot {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .c-l {
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    // right: 70px;
    // top: 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .c-i {
      flex: 1;
      > p {
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 10px;
      }
      margin-bottom: 30px;
    }
    .c-lyr {
      flex: 8;
      width: 100%;
      overflow-y: scroll;
      // 滚动不产生滚动条兼容
      &::-webkit-scrollbar {
        width: 0px;
      }
      &::-o-scrollbar {
        width: 0px;
      }
      &::-moz-scrollbar {
        width: 0px;
      }
      ul {
        // height: 100%;
        list-style: none;

        li {
          height: 35px;
          // padding: 7px 0;
          line-height: 35px;
          font-size: 22px;
          color: rgba(255, 255, 255, 0.3);
        }
        .lyrLightHight {
          color: white;
          transform: scale(1.2);
          font-weight: bold;
        }
      }
    }
  }
}
</style>
